<template>
  <a-spin style="width: 100%">
    <a-card
      class="general-card"
      :header-style="{ paddingBottom: 0 }"
      :body-style="{
        paddingTop: '20px',
      }"
      :title="'分数折线图'"
    >
      <template #extra>
        <a-link>{{ '更多' }}</a-link>
      </template>
      <Chart height="300px" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import axios from 'axios';
  import { onMounted, ref } from 'vue';

  interface ItemLabel {
    value: number;
    label: string;
  }

  const myMatchList = ref([] as any);
  const scheduleListLabels: ItemLabel[] = [
    { value: 1, label: '初赛' },
    { value: 2, label: '复赛' },
    { value: 3, label: '半决赛'},
    { value: 4, label: '决赛' }
  ];
  const times = ref([] as Date[])

  const scoreList = ref([])

  const matchRankScoreList = () => {
    axios.get(`match/playerRank`, {
      params:{
        
      }
    }).then(res => {
      console.log(res)
      res.forEach((element:any) => {
        element.scheduleType = scheduleListLabels.find(label => label.value === element.scheduleType)?.label || '';
        myMatchList.value.push(element)
        times.value.push(element.updateTime)
        scoreList.value.push(element.score)
      })
    })
  }
  console.log(times.value.map(time => time.toISOString()))
  console.log(myMatchList.value.map((match:any) => match.score))
  const chartOption = {
    xAxis: {
      type: 'category',
      data: times.value.map(time => time.toISOString()),
    },
    yAxis: {
      type: 'value',
    },
    toolbox: {},
    series: [
      {
        name: '排名',
        data: scoreList.value, 
        type: 'line',
        label: {
          show: true,
          formatter(data:any) {
            return `${data.value}分`;
          },
        },
      },
    ],
  };
  onMounted(matchRankScoreList);
</script>

<style scoped lang="less"></style>
